let canvas = document.getElementById("canvas");
let colors = ["red", "green", "blue", "olive", "black", "#80ff80"];



async function getKeyWord() {
    // const u = new URLSearchParams(location.search)
    const d = document.getElementById("keyword").value
    const btn = document.getElementById("getkeyWord");
    btn.disabled = true
    btn.style.backgroundColor = "red";
    let w = await fetch("/wordsearch?word=" + d, {
        mode: "cors",
        headers: {
            "Content-Type": "application/json",
        }
    })
    btn.disabled = false
    btn.style.backgroundColor = "";
    const words = await w.json()
    if (words && words.length == 0) {
        confirm("查不到词")
        return
    }
    const keywords = d.split(/[\s\,，]+/);
    show(words, keywords)
}
// window.findway = "l2";
window.findway = "cosine"

window.numNeighbors = "500"
async function getSimWord() {
    // const u = new URLSearchParams(location.search)
    const d = document.getElementById("keyword").value
    const btn = document.getElementById("getSimWord");
    btn.disabled = true
    const u = new URLSearchParams();
    u.set("word", d)
    u.set("findway", window.findway)
    u.set("numNeighbors", window.numNeighbors)

    btn.style.backgroundColor = "red";
    let w = await fetch("/getSimWord?"+u.toString(), {
        mode: "cors",
        headers: {
            "Content-Type": "application/json",
        }
    })
    btn.disabled = false
    btn.style.backgroundColor = "";
    const words = await w.json()
    if (words && words.length == 0) {
        confirm("查不到词")
        return
    }
    console.table(words)
    // const keywords = d.split(/[\s\,，]+/);
    show(words)
}
async function getWordCount() {
    // const u = new URLSearchParams(location.search)
    const d = document.getElementById("keyword").value
    const btn = document.getElementById("getWordCount");
    btn.disabled = true
    const u = new URLSearchParams();
    u.set("word", d)
    u.set("findway", window.findway)
    u.set("numNeighbors", window.numNeighbors)

    btn.style.backgroundColor = "red";
    let w = await fetch("/getWordCount?" + u.toString(), {
        mode: "cors",
        headers: {
            "Content-Type": "application/json",
        }
    })
    btn.disabled = false
    btn.style.backgroundColor = "";
    const words = await w.json()
    if (words && words.length == 0) {
        confirm("查不到词")
        return
    }
    console.table(words)
    // const keywords = d.split(/[\s\,，]+/);
    show(words)
}

async function getKeyWord1() {
    let area = document.getElementById("text");
    document.getElementById("btn").disabled = true
    let w = await fetch("/page", {
        mode: "cors",
        method: "post",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify({ page: area.value })
    })
    document.getElementById("btn").disabled = false
    document.getElementById("btn").style.backgroundColor = "";
    const words = await w.json()
    if (words && words.length == 0) {
        confirm("查不到词")
        return
    }
    show(words)
}

document.getElementById("btn").addEventListener("click", getKeyWord1)
document.getElementById("getkeyWord").addEventListener("click", getKeyWord)
document.getElementById("getSimWord").addEventListener("click", getSimWord)
document.getElementById("getWordCount").addEventListener("click", getWordCount)

/**
 * 
 * @param { {text: string;color: string;    position: number[];}[]} words 
 * @param {string[]} keyword 
 */
async function show(words, keyword) {
    if (keyword) {
        const keyWordCenter = new Array(keyword.length);
        Array.from(keyWordCenter, (v, idx) => {
            keyWordCenter[idx] = { sumX: 0, sumY: 0, count: 0 }
        })
        words.map(word => {
            const index = keyword.findIndex(v => {
                return word.text.includes(v)
            })
            word.color = colors[index]
            keyWordCenter[index].sumX += word.position[0]
            keyWordCenter[index].sumY += word.position[1]
            keyWordCenter[index].count++;
        })
        keyWordCenter.map((v, index) => {
            v.position = [v.sumX / v.count, v.sumY / v.count]
            v.text = "(" + keyword[index] + ")"
            v.color = "#000000"
            words.push(v);

        })
    }
    words.map(v => {
        // v.color = ~~(Math.random() * colors.length)
        v.position[0] *= 1000
        v.position[1] *= 1000
    })
    let wordCloud = new WordCloud(canvas, words);

}
// let words = [
//     { text: "Hello", color: "red", position: [0, 0] },
//     { text: "World", color: "green", position: [50, 0] },
//     { text: "Canvas", color: "blue", position: [-50, 50] }
// ];
